<template>
  <div class="container">
    <tiny-row class="header row-item" :flex="true">
      <tiny-col :span="6">
        <div class="slideshow">
          <tiny-carousel height="400px" autoplay>
            <tiny-carousel-item class="carousel-item-demo" v-for="(item,index) in slideshowImage" :key="index">
              <img :src="item" alt="轮播图" style="width:100%;height:100%"/>
            </tiny-carousel-item>
          </tiny-carousel>
        </div>
      </tiny-col>
      <tiny-col :span="6">
        <div id="wordCloud" style="width: 600px; height: 400px;border: 1px solid #ddd"></div>
      </tiny-col>
    </tiny-row>
    <tiny-row class="main row-item" :flex="true">
      <tiny-col :span="8">
        <div class="col content">
          <ContentList/>
        </div>
      </tiny-col>
      <tiny-col :span="4" class="secondCol">
        <div class="col special-column">
          <div class="card">
            <div class="card2">
              <div class="header">
                <span style="margin:8px 0 0 12px;font-weight:bold;font-size:20px;">热门专栏</span>
                <span style="margin:8px 12px 0 0;cursor: pointer;color:#999aaa"
                      @click="$router.push('/post')">查看所有专栏</span>
              </div>
              <hr style="border-color: #f0f0f2"/>
              <div class="column-list" v-for="column in columnList" :key="column.id">
                <div class="left" style="display: flex;align-items: center">
                  <img :src="column.coverImage" alt="封面图片" width="35" height="35"/>
                  <span>{{ column.name }}</span>
                </div>
                <right theme="filled" size="20" fill="#333" :strokeWidth="2" style="margin-right:12px;"/>
              </div>
            </div>
          </div>
        </div>
      </tiny-col>
    </tiny-row>
  </div>
</template>

<script setup>
import {
  Row as TinyRow, Col as TinyCol, Carousel as TinyCarousel, CarouselItem as TinyCarouselItem, Modal,
} from '@opentiny/vue'
import {GoodTwo, Right} from '@icon-park/vue-next'
import { ref} from "vue";
import {slideshowImage} from "../config/index.js";
import ContentList from '../components/ContentList.vue'
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import {useContentStore} from "../store/useContentStore.js";
import {storeToRefs} from "pinia";
import request from "../utils/request.js";
import {debounce} from "lodash";


document.title = '唯忆社区'
const contentStore = useContentStore()
const {contentList} = storeToRefs(contentStore)
const pageNum = ref(1)
const pageSize = ref(2)
const columnList = ref([])
let hotWordCloudDatas = ref([])




// 查询推荐文章
const queryRecommendArticleList = () => {
  request.get('/api/contents/articles/recommend/').then(res => {
    if (res.code === 1) {
      contentList.value = res.data
    } else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}
queryRecommendArticleList()

// 查询热门专栏
const queryHotColumnList = () => {
  request.get('/api/contents/posts/special-column/hot').then(res => {
    if (res.code === 1) {
      columnList.value = res.data
    } else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}
queryHotColumnList()

// 初始化词云图
const EWordCloud = () => {
  let myChart = echarts.init(document.getElementById('wordCloud'));
  let option;

  option = {
    tooltip: {
      show: true,
      position: 'top',
      textStyle: {
        fontSize: 30
      }
    },
    series: [{
      type: "wordCloud",
      // 网格大小，各项之间间距
      gridSize: 30,
      // 形状 circle 圆，cardioid  心， diamond 菱形，
      // triangle-forward 、triangle 三角，star五角星
      shape: 'circle',
      // 字体大小范围
      sizeRange: [20, 50],
      // 文字旋转角度范围
      rotationRange: [0, 90],
      // 旋转步值
      rotationStep: 90,
      // 自定义图形
      // maskImage: maskImage,
      left: 'center',
      top: 'center',
      right: null,
      bottom: null,
      // 画布宽
      width: '90%',
      // 画布高
      height: '80%',
      // 是否渲染超出画布的文字
      drawOutOfBound: false,
      textStyle: {
        normal: {
          color: function () {
            return 'rgb(' + [
              Math.round(Math.random() * 200 + 55),
              Math.round(Math.random() * 200 + 55),
              Math.round(Math.random() * 200 + 55)
            ].join(',') + ')';
          }
        },
        emphasis: {
          shadowBlur: 10,
          shadowColor: '#2ac'
        }
      },
      data: hotWordCloudDatas.value
    }]
  };
  option && myChart.setOption(option);
}
const initWordCloud = () => {
  // 查询词云图数据
  request.get('/api/contents/articles/wordClouds').then(res => {
    if (res.code === 1) {
      hotWordCloudDatas.value = res.data
      EWordCloud()
    } else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}
initWordCloud()


</script>

<style lang="less" scoped>
.secondCol {
  position: sticky;
  top: 0;
}

.special-column {
  .card {
    width: 80%;
    height: 100%;
    background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
    border-radius: 5px;
    transition: all .3s;
  }

  .card2 {
    .column-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 15px 0 0 12px;
      cursor: pointer;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    transition: all .2s;
    border: 1px solid #ddd;
    padding-bottom:5px;
  }

  .card2:hover {
    transform: scale(0.99);
    border-radius: 5px;
    border: 0;
  }

  .card:hover {
    box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30);
  }
}


.slideshow {
  border: 1px solid #ddd
}

.main {
  margin-top: 25px;
}

.row-item {
  width: 92.785%
}
</style>
